<!DOCTYPE html>
<html lang="en" class="no-ie" style="overflow:hidden;">
	<head>
		<meta charset="UTF-8">
		<title>间隔柱状</title>
		<script>
			"object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(ue4=ue.interface.broadcast);
		</script>
		<script src="./dist/echarts.min.js"></script>
		<script src="./static/js/jquery.min.js"></script>
		<script src="./static/js/FuncTest.js"></script>
		<script src="./static/js/PortChart.js"></script>
		<script>
			$(function() {
				ue4("getSize",{mes:"get windows size"});
				ue4("getColor",{mes:"get all color"});
				ue4("getData",{mes:"get all data"});
				ue4("beginSize",{mes:BeginSize[0],mes2:BeginSize[1]});
				ue4("beginSizeY",{mes:BeginSize});
			});
			/*$(function () {
			    
			});*/
		</script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/*div{
            border: solid deepskyblue 1px;
        }*/
		</style>
	</head>
	<body>
		<div id="main" style="width:1000px;height:300px;border: 0px solid red;"></div>
		<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		
		-->
		<script>
			let BeginSize = [500,350];
			let dataTemp1 = [450,430,440,440,445,300];
			let dataTemp2 = ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22']
			let myChart = null;
			let myColor = ["#70C1FF","rgba(98, 242, 230, 1)","rgba(132, 142, 142, 1)"];
			let changeData=[]
			let maxNum=Math.max(...dataTemp1)
			dataTemp1.forEach(item=>{
				if(item==maxNum){
					changeData.push({
						value:item,
						itemStyle: {
						  color: new echarts.graphic.LinearGradient(0, 0,1, 0, [
						    { offset: 0, color: '#000000' },
						    { offset: 0.6, color: 'rgba(0,192,255,0.6) '},
						    { offset: 1, color: '#00C0FF' }
						  ])
						},
					})
				}
				else{
					changeData.push({
						value:item,
						itemStyle: {
						  color: new echarts.graphic.LinearGradient(0, 0,1, 0, [
						    { offset: 0, color: '#000000' },
						    { offset: 0.6, color: '#00C5CD' },
						    { offset: 1, color: '#00F5FF' }
						  ])
						},
					})
				}
			})
			
			function fresh() {
				let option = {
					title:{
						text:'',
						textStyle:{
							fontSize:15
						},
						right:'13%',
						top:'13%'
					},
					grid: {
					        left: '3%',
					        right: '10%',
					        bottom: '0%',
					        top: '0%',
					        containLabel: true
					    },
					    xAxis: [{
					        splitLine: {
					            show: false
					        },
					        type: 'value',
					        show: false,
					        // inverse:true,
					    }],
					    yAxis: [{
					        splitLine: {
					            show: false
					        },
					        axisLine: { //y轴
					            show: false
					        },
					        type: 'category',
					        axisTick: {
					            show: false
					        },
					        inverse: true,
					        position: 'left',
					        data: ['12-14点', '14-16点', '16-18点', '18-20点', '20-22点','22-24点'],
					        axisLabel: {
					            color: 'white',
					            fontSize: 16.5,
					            fontWeight: 600
					        }
					    }],
					    series: [{
					        name: '标准化',
					        type: 'bar',
					        barWidth: 9, // 柱子宽度
					        label: {
					            show: true,
					            position: 'right', // 位置
					            color: '#3FFCFD',
					            fontSize: 12,
					            fontWeight: 700,
					            distance: -7, // 距离
								// formatter: '{a|'+' |'+'}'+' {c}',
								formatter:function(params){
									if(params.value==maxNum) return '{a|'+' | '+params.value+'}'
									return '{b|'+' | '+'}'+params.value
								},
								rich: {
					            a: {
					                color: '#00C0FF',
					                fontSize:15,
					                fontWeight:800,
					            },
								b: {
								    color: '#00F5FF',
								    fontSize:15,
								    fontWeight:800,
								    },
								}
					        }, // 柱子上方的数值
					        
					        data: changeData
					    }, ]
					
				};
				myChart = echarts.init(document.getElementById('main'));
				myChart.setOption(option);
			}

			fresh();

			
			//浏览器测试用
			change(BeginSize[0],BeginSize[1]);
			//fresh();

			function LinkUE4()
			{
				//alert("I am an alert box!!");
				//ue4("getData2",{mes:"get all data"});
				ue4("CallBack",{},function(v)
				{
					alert("I am an alert box!!");
				});		
			};

			function change(x, y) {
				let div = document.getElementById("main");
				//alert("I am an alert box!!");
				div.style.width = x -5+ "px";
				div.style.height = y -5+ "px";
				var myOption = myChart.getOption();
				myChart.resize();
				let types = []
				myOption.series.forEach((item) => {
					types.push(item.type)
				})
				return types
			}

			ue.interface.ChangeSize = function(data) {
				//alert("I am an alert box!!");
				change(data[0], data[1]);		
				
							
			};

			ue.interface.TransColor = function(data) {
				myColor = data;
			};

			ue.interface.TransColorFresh = function(data) {
				myColor = data;
				fresh();
			};
			
			ue.interface.TransData = function(data)
			{
				//alert(data);
				var obj = JSON.parse(data);
				dataTemp1 = obj.data1;
				dataTemp2 = obj.data2;
				fresh();
			};
			//刷新数据但不刷新动画，只是曲线变化
			ue.interface.Ani = function(data) {
				var myOption = myChart.getOption();
				myChart.setOption(myOption);
			};
			
			//刷新动画且更新数据
			ue.interface.ReAni = function(data) {
				var myOption = myChart.getOption();
				myChart.clear();
				myChart.setOption(myOption);
			};
			
			/************下面数据***********/
			ue.interface.TransData1 = function(data) {
				dataTemp1 = data;
				fresh();
			};

			ue.interface.TransData1 = function(data) {
				dataTemp2 = data;
				fresh();
			};

			ue.interface.titleData1 = function(data) {
				titleshow = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titletext = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titleleft = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titletop = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titlebottom = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titleright = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titlefsize = data;
				fresh();
			};
			ue.interface.titleData1 = function(data) {
				titlecolor = data;
				fresh();
			};
			
			ue.interface.legendData1 = function(data) {
				legendshow = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendname = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendleft = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendtop = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendbottom = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendright = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendiWidth = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendiHeight = data;
				fresh();
			};
			ue.interface.legendData1 = function(data) {
				legendcolor = data;
				fresh();
			};
			
			ue.interface.splitLineData1 = function(data) {
				xsplitLine = data;
				fresh();
			};
			ue.interface.splitLineData1 = function(data) {
				ysplitLine = data;
				fresh();
			};
			
			ue.interface.axisLineData1 = function(data) {
				xaxisLineshow = data;
				fresh();
			};
			ue.interface.axisLineData1 = function(data) {
				yaxisLineshow = data;
				fresh();
			};
			
			ue.interface.axisLabelData1 = function(data) {
				xaxisLabelshow = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				xaxisLabelfsize = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				xaxisLabelcolor = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				yaxisLabelshow = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				yaxisLabelfsize = data;
				fresh();
			};
			ue.interface.axisLabelData1 = function(data) {
				yaxisLabelcolor = data;
				fresh();
			};
			ue.interface.barWidthData1 = function(data) {
				barWidth = data;
				fresh();
			};
			
			
			
		</script>
	</body>
</html>
